<script setup>
	import { computed, ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import { getMemberCartAPI, deleteMemberCartAPI, putMemberCartBySkuIdAPI, putMemberCartSelectedAPI } from '@/utils/apis.js'

	let cartList = ref([])
	let getMemberCartData = async() => {
		let res = await getMemberCartAPI()
		cartList.value = res.result
	}
	
	let scrollTop = ref(0)
	// 获取本地数据
	let userInfo = ref({})
	onShow(() => {
	    userInfo.value = uni.getStorageSync('member')
		if(userInfo.value.mobile){
			// 获取购物车需要登录
			getMemberCartData()
		}
		// 页面跳到顶部
		scrollTop.value = scrollTop.value == 0 ? 1 : 0
	})
	
	// 页面滚动触底事件
	let guessRef = ref()
	let onScrolltolower = () => {
		guessRef.value.getGuessLikeData()
	}
	
	
	// 删除购物车
	let onDeleteCart = (skuId) =>{
		uni.showModal({
			content: '是否删除',
			success: async (res) =>{
				if (res.confirm){
					await deleteMemberCartAPI({ ids: [skuId] })
					getMemberCartData()
				}
			}
		})
	}
	
	// 点击修改数量
	let onChangeCount = (value, skuId) => {
		// console.log(value, skuId);
		putMemberCartBySkuIdAPI(skuId, {count: value})
	}
	// 点击修改选中状态
	let onChangeSelected = (item) => {
		item.selected = !item.selected
		putMemberCartBySkuIdAPI(item.skuId, { selected: item.selected })
	}
	// 计算全选状态 数组every方法，空数组也返回true，所以先判断非空
	const isSelectedAll = computed(() => {
		return cartList.value.length && cartList.value.every((v) => v.selected)
	})
	// 点击全选
	let onChangeSelectedAll = () => {
		// 全选状态取反
		const _isSelectedAll = !isSelectedAll.value
		cartList.value.forEach((item) => {
		    item.selected = _isSelectedAll
		})
		putMemberCartSelectedAPI({ selected: _isSelectedAll })
	}
	
	// 计算总件数和总价格
	// 计算出选中的
	let selectedCartList = computed(() => {
		return cartList.value.filter(v => v.selected)
	})
	// 计算出选中总件数
	let selectedCartListCount = computed(() => {
		return selectedCartList.value.reduce((sum, item) => sum + item.count, 0)
	})
	// 计算出选中总金额
	let selectedCartListMoney = computed(() => {
		return selectedCartList.value.reduce((sum, item) => sum + (item.count * item.nowPrice), 0).toFixed(2)
	})
	// 点击结算按钮
	let gotoPayment = () => {
		if(selectedCartListCount.value == 0) return uni.$showMsg('请选择商品')
		// 跳转到结算页面
		uni.navigateTo({
			url: '/subpkg/create/create'
		})
	}
	
</script>

<template>
	<scroll-view
		scroll-y
		class="scroll-view"
		@scrolltolower="onScrolltolower"
		:scroll-top="scrollTop">
		<!-- 已登录: 显示购物车 -->
		<template v-if="userInfo.mobile">
			<!-- 购物车列表 -->
			<view class="cart-list" v-if="cartList.length">
				<!-- 优惠提示 -->
				<view class="tips">
					<text class="label">满减</text>
					<text class="desc">满1件, 即可享受9折优惠</text>
				</view>
				<!-- 滑动操作分区 -->
				<uni-swipe-action>
					<!-- 滑动操作项 -->
					<uni-swipe-action-item v-for="item in cartList" :key="item.skuId" class="cart-swipe">
						<!-- 商品信息 -->
						<view class="goods">
							<!-- 选中状态 -->
							<!-- 改变radio选中的颜色，字段没作用，样式改解决 -->
							<radio :checked="item.selected" class="checkbox" @click="onChangeSelected(item)" color="#27BA9B" />
							<!-- <text class="checkbox" :class="{ checked: item.selected }"></text> -->
							<navigator :url="`/pages/goods/goods?id=${item.id}`" hover-class="none" class="navigator">
								<image mode="aspectFill" class="picture" :src="item.picture"></image>
								<view class="meta">
									<view class="name ellipsis">{{item.name}}</view>
									<view class="attrsText ellipsis">{{item.attrsText}}</view>
									<view class="price">{{item.nowPrice}}</view>
								</view>
							</navigator>
							<!-- 商品数量 -->
							<view class="count">
								<!-- 最大值为库存字段 -->
								<uni-number-box v-model="item.count" :min="1" :max="item.stock" @change="(value) => onChangeCount(value, item.skuId)"></uni-number-box>
							</view>
						</view>
						<!-- 右侧删除按钮 -->
						<template #right>
							<view class="cart-swipe-right">
								<button @click="onDeleteCart(item.skuId)" class="button delete-button">删除</button>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<!-- 购物车空状态 -->
			<view class="cart-blank" v-else>
				<image src="/static/images/blank_cart.png" class="image" />
				<text class="text">购物车还是空的，快来挑选好货吧</text>
				<navigator open-type="switchTab" url="/pages/index/index" hover-class="none">
					<button class="button">去首页看看</button>
				</navigator>
			</view>
			<!-- 吸底工具栏 -->
			<view class="toolbar">
				<radio @click="onChangeSelectedAll" :checked="isSelectedAll" class="all" color="#27BA9B" />全选
				<!-- <text class="all" :class="{ checked: true }">全选</text> -->
				<text class="text">合计:</text>
				<text class="amount">{{selectedCartListMoney}}</text>
				<view class="button-grounp">
					<view @click="gotoPayment" class="button payment-button" :class="{ disabled: selectedCartListCount === 0 }"> 去结算({{selectedCartListCount}}) </view>
				</view>
			</view>
		</template>
		<!-- 未登录: 提示登录 -->
		<view class="login-blank" v-else>
			<text class="text">登录后可查看购物车中的商品</text>
			<navigator url="/pages/login/login" hover-class="none">
				<button class="button">去登录</button>
			</navigator>
		</view>
		<!-- 猜你喜欢 -->
		<XtxGuess ref="guessRef"></XtxGuess>
		<!-- 底部占位空盒子 -->
		<view class="toolbar-height"></view>
	</scroll-view>
</template>

<style lang="scss">
	// 根元素
	:host {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #f7f7f8;
	}

	// 滚动容器
	.scroll-view {
		height: 0;
		flex: 1;
	}

	// 购物车列表
	.cart-list {
		padding: 0 20rpx;

		// 优惠提示
		.tips {
			display: flex;
			align-items: center;
			line-height: 1;
			margin: 30rpx 10rpx;
			font-size: 26rpx;
			color: #666;

			.label {
				color: #fff;
				padding: 8rpx 15rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				background-color: #27ba9b;
				margin-right: 10rpx;
			}
		}

		// 购物车商品
		.goods {
			display: flex;
			padding: 20rpx 20rpx 20rpx 80rpx;
			border-radius: 10rpx;
			background-color: #fff;
			position: relative;

			.navigator {
				display: flex;
			}

			.checkbox {
				position: absolute;
				top: 0;
				left: 0;

				display: flex;
				align-items: center;
				justify-content: center;
				width: 80rpx;
				height: 100%;

				// 改变radio选中的颜色，字段没作用，样式改解决
				// 在tabBar页面需要样式来改，在component里面直接 color="#27BA9B" 改就行。 神奇啊
				.wx-radio-input.wx-radio-input-checked{
					border:none;
					background: #27BA9B !important;
				}
				// &::before {
				// 	content: '\e6cd';
				// 	font-family: 'erabbit' !important;
				// 	font-size: 40rpx;
				// 	color: #444;
				// }

				// &.checked::before {
				// 	content: '\e6cc';
				// 	color: #27ba9b;
				// }
			}

			.picture {
				width: 170rpx;
				height: 170rpx;
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
			}

			.name {
				height: 72rpx;
				font-size: 26rpx;
				color: #444;
			}

			.attrsText {
				line-height: 1.8;
				padding: 0 15rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.price {
				line-height: 1;
				font-size: 26rpx;
				color: #444;
				margin-bottom: 2rpx;
				margin-top: 20rpx;
				color: #cf4444;

				&::before {
					content: '￥';
					font-size: 80%;
				}
			}

			// 商品数量
			.count {
				position: absolute;
				bottom: 10rpx;
				right: 5rpx;

				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 220rpx;
				height: 48rpx;

				.text {
					height: 100%;
					padding: 0 20rpx;
					font-size: 32rpx;
					color: #444;
				}

				.input {
					height: 100%;
					text-align: center;
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #444;
					background-color: #f6f6f6;
				}
			}
		}

		.cart-swipe {
			display: block;
			margin: 20rpx 0;
		}

		.cart-swipe-right {
			display: flex;
			height: 100%;

			.button {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50px;
				padding: 6px;
				line-height: 1.5;
				color: #fff;
				font-size: 26rpx;
				border-radius: 0;
			}

			.delete-button {
				background-color: #cf4444;
			}
		}
	}

	// 空状态
	.cart-blank,
	.login-blank {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 60vh;

		.image {
			width: 400rpx;
			height: 281rpx;
		}

		.text {
			color: #444;
			font-size: 26rpx;
			margin: 20rpx 0;
		}

		.button {
			width: 240rpx !important;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
			font-size: 26rpx;
			border-radius: 60rpx;
			color: #fff;
			background-color: #27ba9b;
		}
	}

	// 吸底工具栏
	.toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--window-bottom);
		z-index: 1;

		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #ededed;
		border-bottom: 1rpx solid #ededed;
		background-color: #fff;
		box-sizing: content-box;

		.all {
			margin-left: 25rpx;
			font-size: 14px;
			color: #444;
			display: flex;
			align-items: center;
		}
		
		// 改变radio选中的颜色，字段没作用，样式改解决
		// 在tabBar页面需要样式来改，在component里面直接 color="#27BA9B" 改就行。 神奇啊
		.wx-radio-input.wx-radio-input-checked{
			border:none;
			background: #27BA9B !important;
		}
		// .all::before {
		// 	font-family: 'erabbit' !important;
		// 	content: '\e6cd';
		// 	font-size: 40rpx;
		// 	margin-right: 8rpx;
		// }

		.checked::before {
			content: '\e6cc';
			color: #27ba9b;
		}

		.text {
			margin-right: 8rpx;
			margin-left: 32rpx;
			color: #444;
			font-size: 14px;
		}

		.amount {
			font-size: 20px;
			color: #cf4444;

			.decimal {
				font-size: 12px;
			}

			&::before {
				content: '￥';
				font-size: 12px;
			}
		}

		.button-grounp {
			margin-left: auto;
			display: flex;
			justify-content: space-between;
			text-align: center;
			line-height: 72rpx;
			font-size: 13px;
			color: #fff;

			.button {
				width: 240rpx;
				margin: 0 10rpx;
				border-radius: 72rpx;
			}

			.payment-button {
				background-color: #27ba9b;

				&.disabled {
					opacity: 0.6;
				}
			}
		}
	}

	// 底部占位空盒子
	.toolbar-height {
		height: 100rpx;
	}
</style>